<template>
  <!-- 顾客账户管理 -->
  <div>
    <!-- 顶部 -->
    <div class="header">
      <!-- 时间范围选择 -->
      <!-- startEnd 表示指定的时间区域-->
      <el-date-picker
        v-model="startEnd"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
        value-format="timestamp"
        @change="selectDate"
      />
      <!-- 状态筛选 -->
      <el-select v-model="params.status" placeholder="请选择状态" clearable>

        <el-option label="正常" value="正常" />
        <el-option label="未审核" value="未审核" />
      </el-select>
      <el-select v-model="params.type" placeholder="请选择消费类型" clearable>
        <el-option label="充值" value="充值" />
        <el-option label="消费" value="消费" />
      </el-select>
      <!-- 输入订单编号 -->
      <el-select v-model="params.userId" placeholder="请输入编号" clearable>
        <el-option v-for="item in user" :key="item.id" :label="item.username" :value="item.id" />
      </el-select>
      <!-- 查询按钮 -->
      <el-button type="primary" @click="onSearch">查询</el-button>
    </div>
    <!-- {{params}} -->
    <!-- {{user}} -->
    <!-- 表单 -->
    <div class="myForm">

      <el-table :data="customeCount" stripe style="width: 100%">
        <el-table-column prop="id" label="编号" width="100px" />
        <el-table-column prop="transferMoney" label="交易金额" width="180" />
        <el-table-column prop="transferTime" label="交易时间">
          <template slot-scope="scope">
            <span>{{ scope.row.transferTime | fmtDate }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="交易类型">
          <template slot-scope="scope">
            <el-tag type="success">{{ scope.row.type }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag type="danger">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="描述" />
      </el-table>
    </div>
    <!-- 底部分页 -->
    <div class="footer">
      <el-pagination
        :current-page="params.page"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { queryCustomerBills, queryUser } from '@/api/account'
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      startEnd: [],
      customeCount: [],
      // 顾客账单传入的参数
      params: {
        page: 1,
        pageSize: 10,
        roleId: 6
      },
      // 顾客账单总条数
      total: 0,
      // 用户
      user: [],
      //  开始时间
      beginTime: '',
      // 结束时间
      endTime: ''

    }
  },
  // 过滤器
  // filters:{
  //   fmtDate:(str) =>{
  //     return str?moment(str).format('YYYY-MM-DD HH:mm:ss'):''
  //   }
  // },
  computed: {},
  created() {
    this.getCustomeCount()
    this.getUser()
  },
  mounted() { },
  methods: {
    // 分页获取顾客账单信息
    async getCustomeCount() {
      for (const key in this.params) {
        if (!this.params[key]) {
          delete this.params[key]
        }
      }
      if (this.beginTime && this.endTime) {
        this.params.beginTime = this.beginTime
        this.params.endTime = this.endTime
      }
      console.log(this.params)
      const res = await queryCustomerBills(this.params)
      console.log(res, '获取响应')
      this.customeCount = res.data.list

      this.total = res.data.total
    },
    // 分页获取用户信息
    async getUser() {
      const res = await queryUser(this.params)
      // console.log(res, '获取用户的信息');
      this.user = res.data.list
      console.log(this.user, '用户信息')
    },
    // 查询
    onSearch() {
      this.params.page = 1
      this.getCustomeCount()
    },
    // 页码条数发生改变  pageSize
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize
      this.params.page = 1
      this.getCustomeCount()
    },
    // 当前页码发生改变触发的方法  page
    handleCurrentChange(page) {
      this.params.page = page
      this.getCustomeCount()
    },
    // 时间处理
    selectDate() {
      if (this.startEnd === null) {
        this.startEnd = []
        this.beginTime = undefined
        this.endTime = undefined
      } else {
        this.beginTime = this.startEnd[0]
        this.endTime = this.startEnd[1]
      }
    }
  }
}

</script>
<style scoped>

</style>
